<template>
  <div>
    <!-- 返回按钮 -->
    <el-page-header @back="backHandler" content="学生详情">
    </el-page-header>
    <!-- 学生信息 -->
    <div class="student-info" style="margin-top: 20px;">
      <el-card>
        <div class="info-header" style="font-size: 20px; font-weight: bold;">学生信息</div>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6">
            <div class="info-label">学生姓名：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.name }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">学生学号：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.student_id }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">性别：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.gender }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">年龄：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.age }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">所属班级：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.class_name }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">入学时间：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">{{ studentInfo.enrollment_date }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="info-label">学生照片：</div>
          </el-col>
          <el-col :span="18">
            <div class="info-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="studentInfo.photo"
                fit="cover"
              ></el-image>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 编辑按钮 -->
    <div style="margin-top: 20px; text-align: center;">
      <el-button type="primary" @click="editStudent">编辑学生信息</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentInfo: {
        name: '',
        student_id: '',
        gender: '',
        age: '',
        class_name: '',
        enrollment_date: '',
        photo: ''
      }
    };
  },
  mounted() {
    this.getStudentInfo();
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    },
    async getStudentInfo() {
      let id = this.$route.query.id;
      console.log(id)
      // 获取学生信息的接口调用
      // let res = await get(`/student/getStudentInfo`, { id: id });
      // this.studentInfo = res.data;
    },
    editStudent() {
      // 跳转到编辑学生信息的页面
      this.$router.push({
        path: '/student/edit',
        query: { id: this.$route.query.id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.student-info {
  .info-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
}
</style>